<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>
    <div id="app">
        <span>{{message + firstName}}</span>
        <span v-once>{{message + firstName}}</span>
        <span>{{fullname}}</span>
        <span v-html='url'></span>
        <img v-bind:src="imgUrl" alt="">
        <a v-bind:href="href">百度</a>
        <img :src="imgUrl" alt="">
        <a :href="href">百度</a>
        <div :class="act">哈哈</div>
        <div :style="fStyle()">嘻嘻</div>
        <div :class="{active:isActive}">字体改色</div>
        <button @click="btnClick">我改</button>
        <ul>
            <li v-for="(item,index) in movies" :class="{active:isClick==index}" @click="mClick(index)">{{item}}</li>
        </ul>
        <span>当前计数:{{counter}}</span>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
        <button @click="add">+</button>
        <button @click="minus">-</button>

        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=60">及格</h2>
        <h2 v-else>不及格</h2>

        <span v-if="isActive">
            <label for="username">用户账号</label>
            <input type="text" id="username" placeholder="用户账号">
          </span>
          <span v-else>
            <label for="email">用户邮箱</label>
            <input type="text" id="email" placeholder="用户邮箱">
          </span>
          <button @click="isActive = !isActive">切换类型</button>

          <!--<input type="text" v-model="message">-->
  <!--<input type="text" :value="message" @input="valueChange">-->
  <input type="text" :value="message" @input="message = $event.target.value">

            <!--v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中-->
  <h2 v-if="isActive" id="aaa">{{message}}</h2>

  <!--v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none-->
  <h2 v-show="isActive" id="bbb">{{message}}</h2>

    <!-- 1.checkbox单选框 -->
  <!-- <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是: {{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
    </div> -->

      <!--2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是: {{hobbies}}</h2>
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>

  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>
</body>
</html>
<script src="vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            firstName:'天天',
            movies:['AA','BB','CC','DD'],
            counter:0,
            url:'<a href="https://www.baidu.com">百度一下</a>',
            imgUrl:'https://i0.hdslb.com/bfs/archive/353ef2f34cb4f731784d98bb663388d9ec4f43bb.jpg@336w_190h.webp',
            href:'https://www.baidu.com',
            act:'active',
            isActive:true,
            isClick:0,
            fSize:'50px',
            fColor:'blue',
            score:99,
            isAgree:false,
            hobbies: [], // 多选框,
            originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球'],
            fruit: '香蕉'
        },
        computed:{
            fullname(){
                return this.firstName + this.message
            },
            result() {
            let showMessage = '';
            if (this.score >= 90) {
            showMessage = '优秀'
            } else if (this.score >= 80) {
            showMessage = '良好'
            }
            // ...
            return showMessage
            }
        },
        methods:{
            add () {
                this.counter++
            },
            minus () {
                this.counter>0?this.counter--:null;
            },
            btnClick () {
                this.isActive = !this.isActive
            },
            mClick (index) {
                this.isClick=index;
            },
            fStyle(){
                return {fontSize:this.fSize,color:this.fColor};
            }
        }
    })
    app.message = '大地飞歌'
    app.movies.push(1111)

</script>